<template>
  <div class="j-input-wrapper" ref="jInputWrapper">
    <slot> </slot>
  </div>
</template>
<script>
export default {
  name: 'JInputWrapper',
  mounted() {
    let elInput = this.$refs.jInputWrapper.children[0]
    let inputWrapper = elInput.children[0]
    let input = inputWrapper.children[0]
    input.required = true

    let label = document.createElement('label')
    label.innerText = input.placeholder
    input.placeholder = ''

    let underline = document.createElement('div')
    underline.classList.add('underline')

    inputWrapper.appendChild(label)
    inputWrapper.appendChild(underline)
  },
}
</script>
<style lang="scss">
.el-form-item.is-error .j-input-wrapper .el-input__wrapper {
  box-shadow: none;
  border-bottom: 1px solid var(--el-color-danger);
}

.j-input-wrapper {
  position: relative;
  width: 100%;

  margin-top: 20px;

  .el-input__wrapper {
    background-color: transparent;
    border-bottom: 1px solid var(--el-text-color-primary);
    box-shadow: none;
  }

  .el-input__wrapper:hover,
  .el-input__wrapper.is-focus {
    box-shadow: none !important;
  }

  input {
    width: 100%;
    border: none;
    font-size: 16px;
  }

  label {
    position: absolute;
    left: 12px;
    font-size: 16px;
    color: var(--el-text-color-placeholder);
    /* 点击lable，穿透输入框 */
    pointer-events: none;
    transition: all 0.3s ease;
  }

  .underline {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 10px;
    width: 100%;
    border-bottom: 2px solid var(--el-color-primary);
    border-radius: 5px;
    transform: scaleX(0);
    transition: all 0.3s ease;
  }

  /* 输入框获取焦点或输入有效值时 */
  input:focus ~ label,
  input:valid ~ label {
    // lable上移，同时改变字号和颜色
    transform: translateY(-26px);
    font-size: 14px;
    color: var(--el-color-primary);
  }

  input:focus ~ .underline,
  input:valid ~ .underline {
    transform: scaleX(1);
  }
}
</style>
